CSS Box Shadow Generator
Create perfect box shadows with ease using this intuitive CSS Box Shadow Generator. Designed for both beginners and experienced developers, it lets you adjust offset position, blur radius, spread, and color while viewing changes instantly in a real-time preview.
Whether you’re fine-tuning subtle UI depth for buttons and cards or experimenting with bold, layered shadow effects, this tool makes it easy to dial in the exact look you want. Once you’re happy with the result, simply copy the generated CSS code and drop it straight into your project for fast, consistent styling.
CSS Box Shadow Generator
Box Shadow CSS Property
The box-shadow property is a CSS3 property that allows you to create a shadow effect for almost any element of a web page. It is similar to the Drop Shadows effect in Photoshop, using this property it creates the illusion of depth on 2-dimensional pages.
Using the box-shadow property, you can add one or more shadows to an element. A shadow is a copy of an element offset by a specified distance. Shadows can be external or internal, blurry or flat, they can also follow the contours of blocks with rounded corners - using the border-radius property. Using the keyword inset, shadows are created inside the element, making the element visually voluminous or depressed.
Syntax
The property takes on a composite value of five different parts: horizontal offset, vertical offset, blur, spread and shadow color. In addition, you can specify whether the shadow is external or internal by using the keyword inset.
box-shadow: inset offset-x offset-y blur spread color;
Unlike other properties, such as border, which can be divided into sub-properties (border-width, border-style, etc.), the box shadow CSS property stands alone. Furthermore, the order in which you write the property values is important (except the inset keyword, which can be at the beginning or end.)
Horizontal Offset (X-axis)
The first value offset-x, shifts the shadow along the X axis. A positive value will shift the shadow to the right, and a negative value - to the left.
.box1 {
box-shadow: 10px 0px 2px 0px rgba(128, 0, 0, 1);
}
.box2 {
box-shadow: -10px 0px 2px 0px rgba(128, 0, 0, 1);
}Vertical Offset (Y-axis)
The second value offset-y, shifts the shadow along the Y axis. A positive value will shift the shadow down, and a negative value - up.
.box3 {
box-shadow: 0px 10px 2px 0px rgba(128, 0, 0, 1);
}
.box4 {
box-shadow: 0px -10px 2px 0px rgba(128, 0, 0, 1);
}Blur
The third value - blur, is the radius of the shadow blur, see how it works on the box shadow generator above. A value of 0 means that the shadow will not be blurry at all, the edges and sides will be absolutely clear. The higher the value, the more blurry the shadow will become. Negative values are not allowed.
.box5 {
box-shadow: 0px 0px 5px 0px rgba(128, 0, 0, 1);
}
.box6 {
box-shadow: 3px 3px 5px 0px rgba(128, 0, 0, 1);
}Spread
The fourth value - spread, represents the size of the shadow or the distance from the shadow to the element. With a positive value, the shadow will increase, go beyond the element. A negative value will reduce and compress the shadow.
.box7 {
box-shadow: 0px 0px 5px 5px rgba(128, 0, 0, 1);
}
.box8 {
box-shadow: 3px 3px 5px 5px rgba(128, 0, 0, 1);
}Color
The shadow color can be absolutely any color and can be written in different formats available in CSS (HEX, RGB, RGBA, etc.), we use RGBA, so that you can set the opacity level of the shadow.
.box9 {
box-shadow: 0px 0px 5px 5px #638253;
}
.box10 {
box-shadow: 3px 3px 5px 0px rgba(0, 128, 0, 1);
}Inset
The inset value determines the position of the shadow. By default, it is not specified, which means that the shadow will be on the outside of the element. In order for the shadow to be inside the element, you can add the inset keyword at the beginning or end of the property.
.box11 {
box-shadow: inset 0px 0px 5px 5px #638253;
}
.box12 {
box-shadow: inset 3px 3px 5px 0px rgba(0, 128, 0, 1);
}Multiple Shadows
With the CSS box-shadow property, you can add multiple shadows to an element. To add multiple shadows, just write them in a single property, separated by commas. Or, just use the generator above ... it's so much easier!
.box13 {
box-shadow: 0 1px 4px rgba(0, 0, 0, .3),
-23px 0 20px -23px rgba(0, 0, 0, .8),
23px 0 20px -23px rgba(0, 0, 0, .8),
inset 0 0 40px rgba(0, 0, 0, .1);
}
.box14 {
box-shadow: 6px 6px #989898, 12px 12px #6c6666;
}
.box15 {
box-shadow: 0 0 0 1px #CCCCCC,
0 -20px 0 -10px #00FFFF,
20px 0 0 -10px #DC143C,
0 20px 0 -10px #006400,
-20px 0 0 -10px #FF00FF;
}
.box16 {
box-shadow: -15px -15px 2px -5px rgba(160,82,45,.5),
-15px 15px 2px -5px rgba(0,255,255,.5),
15px -15px 2px -5px rgba(255,0,0,.5),
15px 15px 2px -5px rgba(255,255,0,.5);
}
.box17 {
box-shadow: 0 0 0 7px #60B88D,
0 0 0 14px #90CDAF,
0 0 0 21px #BFE3D1;
}
.box18 {
box-shadow: -20px 20px 0 -17px #fff,
20px -20px 0 -17px #fff,
20px 20px 0 -20px #c27153,
0 0 0 2px #c27153;
}
Frequently Asked Questions
What is the CSS box-shadow property?
box-shadow is a CSS property that adds one or more shadow effects behind an element, creating the illusion of depth on an otherwise flat 2D page.
It works on almost any HTML element and supports both external shadows (cast outside the element) and internal shadows using the inset keyword.
The shadow follows the shape of the element, including any rounded corners set with border-radius.
What are the values for box-shadow and what does each one do?
The full syntax is box-shadow: inset offset-x offset-y blur spread color;. Each value does the following:
offset-x shifts the shadow left or right. Positive values move it right, negative values move it left.
offset-y shifts the shadow up or down. Positive values move it down, negative values move it up.
blur controls how soft the shadow edges are. A value of 0 produces a hard-edged shadow; higher values produce a more diffuse blur. Negative values are not allowed.
spread expands or contracts the shadow. Positive values make it larger than the element; negative values shrink it.
color sets the shadow colour in any valid CSS format - HEX, RGB, RGBA, HSL, and so on. Using RGBA lets you control opacity at the same time.
inset is an optional keyword that moves the shadow to the inside of the element rather than outside. It can appear at the beginning or the end of the value.
How do I add multiple box shadows to one element?
You can stack as many shadows as you like on a single element by listing them in one box-shadow declaration, separated by commas.
For example: box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(255,255,255,0.5);
Shadows are rendered from front to back - the first value in the list sits on top. This makes it easy to create layered or neumorphic effects without needing multiple elements.
What is the difference between blur and spread in box-shadow?
Blur controls the softness of the shadow's edges. It does not change the shadow's size - it only affects how sharply or gradually the shadow fades out. A blur of 0 produces a perfectly crisp shadow; increasing it makes the edges progressively more feathered.
Spread changes the actual size of the shadow relative to the element. A positive spread makes the shadow extend further in all directions; a negative spread shrinks it so the shadow is smaller than the element. The two are independent - you can have a large, sharp shadow (high spread, zero blur) or a small, soft one (negative spread, high blur).
What does inset do in CSS box-shadow?
By default, box-shadow renders outside the element. Adding the inset keyword moves the shadow to the inside, making the element appear pressed in or recessed rather than raised.
Inset shadows are drawn on top of the element's background but behind its content and border.
They are commonly used to create pressed-button states, inner glow effects, and depressed input fields.
The inset keyword can be placed at the beginning or the end of the shadow declaration.
How do I make a box shadow on only one side of an element?
Set the offset in the direction you want the shadow to appear, then use a negative spread value to cancel the shadow on the other sides.
For example, a shadow on the bottom only: box-shadow: 0 8px 6px -6px rgba(0,0,0,0.4);
The -6px spread pulls the shadow inward enough to hide it on the left, right, and top, leaving only the bottom edge visible.
Adjust the spread and blur values together to tune how clean the single-side effect looks.
How do I remove a box shadow in CSS?
Set box-shadow: none; to remove a shadow entirely. This is commonly used in hover or focus states to strip a shadow added in a default state, or to override a shadow inherited from a parent stylesheet or framework.
You can also use box-shadow: 0 0 0 0 transparent; if you need a value that animates cleanly from a shadow to no shadow using CSS transitions.
Can I animate box-shadow with CSS transitions?
Yes, box-shadow is fully animatable. You can transition it smoothly using transition: box-shadow 0.3s ease; on the element, then change the shadow value in a :hover or :focus state.
For best performance, avoid transitioning large or highly blurred shadows on many elements at once - box shadows are rendered by the browser's compositor and heavy blur values can impact frame rate on lower-end devices.
A common optimisation is to use a :after pseudo-element with the shadow and transition its opacity instead, which is cheaper for the browser to render.
Does box-shadow affect page layout or take up space?
No. box-shadow is purely visual and does not affect the document layout. The shadow is painted outside the element's box model, so it does not push other elements away or add to the computed width, height, margin, or padding.
This is different from outline and border, which can interact with layout in different ways. If you need the shadow area to act as spacing, you will need to add explicit padding or margin separately.
What is the difference between box-shadow and filter: drop-shadow()?
box-shadow always follows the rectangular box of the element (including border-radius), regardless of the element's visible content or transparency.
filter: drop-shadow() follows the actual rendered shape of the element, including transparent areas. This makes it much more useful for irregular shapes like PNG images with transparency, SVG icons, or elements styled with clip-path.
The trade-off is that drop-shadow() does not support the inset keyword or multiple stacked shadows, and it applies to the entire element including its children, which can produce unexpected results on complex components.
What color format should I use for box-shadow?
Any valid CSS color format works - HEX, RGB, RGBA, HSL, HSLA, or named colors. For most practical use, rgba() is the most convenient because it lets you set both the color and the opacity in a single value, giving you fine control over how strong the shadow appears.
Using a semi-transparent dark color like rgba(0, 0, 0, 0.15) for shadows tends to look more natural than a fully opaque color, because it blends with whatever background is behind the element.
CSS References Used
- CSS Property
- box-shadow
- CSS Property
- border-radius
- CSS Property
- border
- CSS Data Type
- <color>
- CSS Data Type
- <length>
- CSS Function
- rgba